<template>
  <vue-tab current="index"></vue-tab>
  <div class="sec-top">
<!--     <vue-date-picker
      :time.sync="startTime"
      :option="datePickerOption">
    </vue-date-picker>
    到 <vue-date-picker
      :time.sync="endTime"
      :option="datePickerOption">
    </vue-date-picker>
    <button class="btn btn-primary btn-sm" @click="getList">查询</button> -->
    <div class="form-inline">
      <input type="text" class="form-control input-sm" placeholder="推广员姓名" v-model="seachName">
      <button class="btn btn-primary btn-sm" @click="getList">搜索推广员</button>
    </div>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <div class="form-inline">
      <input type="file" class="form-control input-sm" v-el:settleFile accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
      <button class="btn btn-primary btn-sm" @click="importData">导入结算表格</button>
    </div>
    <vue-export-settle :show-settle.sync="showSettle"></vue-export-settle>
    <vue-export-pay :show-pay.sync="showPay"></vue-export-pay>
  </div>
  <table class="table table-bordered table-hover">
    <thead>
      <tr>
        <th class="col-sm-6" colspan="4">当前推广员人数：{{totalCount}}</th>
        <th class="col-sm-3" colspan="2">推广总费用：{{totalPrice}}元</th>
        <th class="col-sm-3" colspan="2">已结算费用：{{totalSettlePrice}}元</th>
      </tr>
      <tr>
        <th class="col-sm-1">推广员姓名</th>
        <th class="col-sm-2">所在企业<br>职位</th>
        <th class="col-sm-2">联系方式</th>
        <th class="col-sm-1">支付宝账号</th>
        <th class="col-sm-1">申请通过时间</th>
        <th class="col-sm-2">收入情况(元)</th>
        <th class="col-sm-1">最新结算时间</th>
        <th class="col-sm-2"></th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in list">
        <td><a v-link=" '/settle/' + item.phone ">{{item.name}}</a></td>
        <td>
          企业：{{item.company}}<br>
          职业：{{item.profession}}
        </td>
        <td>
          邮箱：{{item.mail}}<br>
          手机：{{item.phone}}
        </td>
        <td>{{item.alipayAccount}}</td>
        <td>{{item.auditTime}}</td>
        <td>
          总奖励：{{+item.totalPrice}}<br>
          已结算：{{+item.settlePrice}}<br>
          未结算：{{+item.noSettlePrice}}<br>
        </td>
        <td>{{item.lastPayTime}}</td>
        <td class="text-right">
          <a v-link="{path: '/sharelist', query: { phone: item.phone }}" class="btn btn-primary btn-sm" role="button">邀请好友明细</a>
          <a v-link=" '/settle/' + item.phone " class="btn btn-primary btn-sm" role="button">受邀人操作详情</a>
        </td>
      </tr>
    </tbody>
  </table>
  <vue-pages :pages.sync="pages" :get-list="getList"></vue-pages>
</template>
<style src="./promoter-list.css" scoped></style>
<script src="./promoter-list.js"></script>